(function(){
  var test = document.querySelector(".test .test_list ul");
  var ul = document.querySelector(".paging ul");
  var btn = document.querySelectorAll(".paging button");
  var num = 0; //页码
  var onlines = online;
  var total = Math.ceil(onlines.length / 12); //总页数
  var paging =(num + 1) * 12 > onlines.length ? onlines.length : (num + 1) * 12;//每页数据
  //渲染页数
    for (var i = 0; i < total; i++) {
      ul.innerHTML += `<li>${i + 1}</li>`;
    }
  ul.children[num].className = "active";
  
   for (var i = 0; i < total; i++) {
     ul.children[i].index = i;
     ul.children[i].onclick = function(){
       for (var j = 0; j < total; j++){
        ul.children[j].className = "";
       }
       num = this.index;
       paging =
         (num + 1) * 12 > onlines.length ? onlines.length : (num + 1) * 12;
       ul.children[this.index].className = "active";
       pags();
     }
   }
   function pags() {
     var content = "";
     for (var i = num * 12; i < paging; i++) {
       content += `<li><a href="../html/videoDetail.html">
          <div class="test_img">
            <img src="${onlines[i].src}" alt="">
            <div class="subscript display">${onlines[i].cont}</div>
            <div class="study">100人已经考试<span class="grade fr display">初一</span></div>
          </div>
          <div class="test_bottom clearfix">
            <div class="test_bottom_fl fl">
              <p>${onlines[i].title}</p>
              <span>${onlines[i].time}课时</span>
            </div>
            <div class="test_bottom_fr fr">${
              onlines[i].isFree ? "免费学习" : ""
            }</div>
          </div>
        </a></li>`;
     }
     test.innerHTML = content;
   }
   pags();
   //点击上一页
   btn[0].onclick = function(){
    num--;
    if (num <= 0){
      num = 0;
    }
    for (var i = 0; i < total; i++) {
      ul.children[i].className = "";
    }
    paging = (num + 1) * 12 > onlines.length ? onlines.length : (num + 1) * 12;
    ul.children[num].className = "active";
    pags();
    console.log(num);
   }
   //点击下一页
   btn[1].onclick = function(){
    num++;
    if (num >= total-1){
      num = total - 1;
    }
    for (var i = 0; i < total; i++) {
      ul.children[i].className = "";
    }
    paging = (num + 1) * 12 > onlines.length ? onlines.length : (num + 1) * 12;
    ul.children[num].className = "active";
    console.log(num);
    pags();
   }
   //过滤器
   var menu_li = document.querySelectorAll(".menu_ul>li");
   var subject = menu_li[3].querySelectorAll("li");

   for(var i=0;i<subject.length;i++){
     subject[i].onclick = function () {
       var obj = this.getAttribute("obj");
       if (obj == "all") {
         onlines = online;
       }else{
         onlines = online.filter(function (value) {
           return value.subject == obj;
         });
       }
       
       total = Math.ceil(onlines.length / 12); //总页数
       num = 0; //页码
       paging =
         (num + 1) * 12 >= onlines.length ? onlines.length : (num + 1) * 12; //每页数据
       var content = "";
       for (var i = 0; i < total; i++) {
         content += `<li>${i + 1}</li>`;
       }
       ul.innerHTML = content;
       if(total != 0) ul.children[num].className = "active";
       
       if (total !=0){
         for (var i = 0; i < total; i++) {
           ul.children[i].index = i;
           ul.children[i].onclick = function () {
             for (var j = 0; j < total; j++) {
               ul.children[j].className = "";
             }
             num = this.index;
             paging =
               (num + 1) * 12 > onlines.length
                 ? onlines.length
                 : (num + 1) * 12;
             ul.children[this.index].className = "active";
             pags();
           };
         }
       }
       pags();
     };;
   }
})()